<template>
	<view class="content">
		<nav-bar :title="'个人中心'" />
		<view class="account-bg">
			<view class="account-avatr">
				<image src="../../static/avatir.gif" class="account-avatr-gif"></image>
				<!-- <view class="username">
					{{ userinfo.username }}
				</view> -->
			</view>
			<image src="../../static/ms.gif" mode='scaleToFill' class='account-gif'></image>
		</view>
		<view class="list">
			<up-cell-group>
				<up-cell icon="lock-fill" title="修改密码" @click="upPass" />
			</up-cell-group>
			<up-cell-group>
				<up-cell icon="setting-fill" title="退出登录" @click="loginOut" />
			</up-cell-group>
		</view>
		<custom-popup :popupShow="show" mode="center" title="修改密码" class="car-popup-custom" @close="show = false"
			width="95%">
			<view class="popup_content">
				<uni-forms :model="formData" :rules="rules" ref="form" labelAlign="right" label-width="90px">
					<uni-forms-item label="新密码" name="newpassword1" required>
						<up-input v-model="formData.newpassword1" password clearable placeholder="请输入新登录密码" border="bottom" />
					</uni-forms-item>
					<uni-forms-item label="确认新密码" name="newpassword2" required>
						<up-input v-model="formData.newpassword2" password clearable placeholder="请再次输入新登录密码" border="bottom" />
					</uni-forms-item>
				</uni-forms>
				<view style="display: flex; gap: 20rpx; margin-left:auto;">
					<up-button text="取消" size="small" @click="show = false"></up-button>
					<up-button text="确定" size="small" type="primary" @click="confirm"></up-button>
				</view>
			</view>
		</custom-popup>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useLoginStore } from '@/stores/login.js';
import loginAPI from '../../api/login';
const LoginStore = useLoginStore()

const show = ref(false)
function upPass() {
	show.value = true
};

const formData = reactive({
	newpassword1: '',
	newpassword2: '',
});
const rules = {
	newpassword2: {
		rules: [{ required: true, errorMessage: '请输入密码', trigger: ['change'] },
		{
			validateFunction: (rule, value, data, callback) => {
				if (value !== data.newpassword1) {
					callback('两次密码输入不同')
				}
				return true
			}
		}
		]
	},
};

const form = ref(null)
const userinfo = uni.getStorageSync('userinfo')
function confirm() {
	form.value.validate().then(() => {
		const params = {
			account_id: userinfo.user_id,
			...formData
		}
		loginAPI.update_password(params).then(res => {
			uni.$u.toast('修改成功')
			setTimeout(() => {
				LoginStore.LoginOut().then(() => {
					uni.reLaunch({
						url: '/pages/login/index'
					});
				})
			}, 1000)
		})
	})
};


function loginOut() {
	uni.showModal({
		title: '提示',
		content: '是否退出当前账号',
		success: (res) => {
			if (res.confirm) {
				LoginStore.LoginOut().then(() => {
					uni.reLaunch({
						url: '/pages/login/index'
					});
				})
			}
		}
	});
};

// export default {
// 	data() {
// 		return {
// 			userinfo: {},
// 			show: false,
// 			disa: false,
// 			form: {
// 				newpassword1: '',
// 				newpassword2: '',
// 			},
// 			rules: {
// 				newpassword2: {
// 					rules: [{ required: true, errorMessage: '请输入密码', trigger: ['change'] },
// 					{
// 						validateFunction: (rule, value, data, callback) => {
// 							if (value !== data.newpassword1) {
// 								callback('两次密码输入不同')
// 							}
// 							return true
// 						}
// 					}
// 					]
// 				},
// 			},
// 		}
// 	},
// 	onReady() {
// 		// 需要在onReady中设置规则
// 		this.$refs.form.setRules(this.rules)
// 	},
// 	created() {
// 		this.userinfo = uni.getStorageSync('userinfo')
// 	},
// 	methods: {
// 		...mapActions(['LoginOut']),
// 		confirm() {
// 			this.$refs.form.validate().then(() => {
// 				const params = {
// 					account_id: this.userinfo.user_id,
// 					...this.form
// 				}
// 				update_password(params).then(res => {
// 					uni.$u.toast('修改成功')
// 					setTimeout(() => {
// 						this.LoginOut().then(() => {
// 							uni.reLaunch({
// 								url: '/pages/login/index'
// 							});
// 						})
// 					}, 1000)
// 				})
// 			})
// 		},
// 		
// 	}
// }
</script>


<style lang="scss">
.account-bg {
	height: 550rpx;
	background: pink;
	background: url('../../static/my_bg.jpg') center/cover no-repeat;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	.account-avatr {
		text-align: center;
		margin-top: 220rpx;

		.account-avatr-gif {
			width: 150rpx;
			height: 150rpx;
		}

		.username {
			color: #fff;
			font-weight: 700;
			font-size: 40rpx;
		}
	}

	.account-gif {
		height: 100rpx;
		width: 100%;
		mix-blend-mode: screen;
	}
}

.list {
	background-color: #fff;
	margin: 20rpx 40rpx 0;
	padding-top: 20rpx;
	border-radius: 20rpx;
	height: 600rpx;
}

.popup_content {
	background-color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 20rpx;
	gap: 20rpx;
	box-sizing: border-box;
}
</style>